<template>
  <div class="fence-container">
    <a-form class="controls" layout="inline">
      <a-form-item>
        <a-button-group>
          <template v-if="drawer.mode === 'none'">
            <a-button @click="drawer.mode = 'polygon'">多边形</a-button>
            <a-button @click="drawer.mode = 'rectangle'">矩形</a-button>
            <a-button @click="drawer.mode = 'circle'">圆形</a-button>
          </template>
          <template v-else>
            <a-button @click="drawer.mode = 'none'">取消</a-button>
          </template>
        </a-button-group>
      </a-form-item>
    </a-form>
    <a-form class="info" layout="inline">
      <a-form-item label="面积" v-show="area > 0"
      >{{ (area / 1000000).toFixed(4) }}平方公里
      </a-form-item
      >
      <!--<a-form-item>
        <a-button size="small" shape="circle" icon="copy" @click="showModal" />
      </a-form-item>-->
      <a-form-item label="卫星图">
        <a-switch v-model="satellite"/>
      </a-form-item>
    </a-form>

    <amap ref="map" vid="amap" :events="events" async :center.sync="center" :zoom.sync="zoom">
      <amap-satellite-layer :visible="satellite"/>
      <amap-scale/>
      <amap-marker v-if="position" :position.sync="position"/>
      <amap-mouse-tool
        :mode.sync="drawer.mode"
        clear-when-close
        @draw="onDraw"
      />
      <!--:events="drawer.polygon.events"-->
      <amap-polygon
        ref="polygon"
        v-if="drawer.polygon"
        :path.sync="drawer.polygon"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
      <amap-circle
        v-if="drawer.circle"
        :center.sync="drawer.circle.center"
        :radius.sync="drawer.circle.radius"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
      <amap-rectangle
        v-if="drawer.rectangle"
        :bounds.sync="drawer.rectangle"
        :fill-color="styles.fill"
        :stroke-color="styles.stroke"
        :fill-opacity="0.5"
        editable
      />
    </amap>
  </div>
</template>

<script>
import {
  Amap,
  Marker,
  Scale,
  MouseTool,
  Polygon,
  Circle,
  Rectangle,
  SatelliteLayer
} from '@amap/amap-vue'

function makeBounds(value) {
  const sw = new window.AMap.LngLat(value[0][0], value[0][1])
  const ne = new window.AMap.LngLat(value[1][0], value[1][1])
  return new window.AMap.Bounds(sw, ne)
}

export default {
  components: {
    Amap,
    AmapMarker: Marker,
    AmapScale: Scale,
    AmapMouseTool: MouseTool,
    AmapPolygon: Polygon,
    AmapCircle: Circle,
    AmapRectangle: Rectangle,
    AmapSatelliteLayer: SatelliteLayer
  },
  props: {
    defaultPosition: { type: Array },
    defaultAreaLine: { type: Array }
  },
  watch: {
    defaultAreaLine: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal != oldVal && newVal != null) {
          this.drawer.type = 'polygon'
          this.drawer.polygon = newVal
          this.onDraw('polygon', this.drawer.polygon)
          let centerps = this.getCenterPoint(newVal)
          this.center = [centerps.lng, centerps.lat]
//        this.position = [];
        }
      },
      immediate: true
    },
    defaultPosition: {
      deep: true,
      handler(newVal, oldVal) {
//    	console.log("newVal111111111",newVal)
        if (newVal != 'undefined' && newVal != null) {
          this.center = this.position = [newVal[0], newVal[1]]
        }
      },
      immediate: true
    },
    'drawer.mode'(mode) {
      console.log('drawer.mode', mode)
      if (mode !== 'none') {
        const { drawer } = this
        drawer.type = 'none'
        drawer.polygon = null
        drawer.circle = null
        drawer.rectangle = null
      }
    }
  },
  data() {
    let _this = this
    return {
      center: [113.889882, 22.940744],
      position: [113.889882, 22.940744],
      zoom: 15,
      ready: false,
      styles: {
        fill: '#409EFF',
        stroke: '#000A58'
      },
      satellite: false,
      events: {
        init: (o) => {
        },
        click: (e) => {
          console.log('点击地图')
          let { lng, lat } = e.lnglat
          if (_this.drawer.type == 'polygon' && _this.drawer.mode == 'polygon') {
            let arr = [e.lnglat.lng, e.lnglat.lat]
            _this.drawer.polygon.push(arr)
          }
        },
        //多边形可编辑情况下的拖动事件
        adjust: e => {
          console.log('多边形可编辑情况下的拖动事件', e)
        }
      },
      drawer: {
        type: 'none',
        mode: 'none',
        polygon: [],
        polygon11: {
          path: [],//这里需要二维数组
          events: {
            // 初始化
            init: e => {
              console.log(e)
            },
            //多边形点击事件
            click: e => {
              console.log(e)
            },
            //多边形可编辑情况下的拖动事件
            adjust: e => {
              console.log('多边形可编辑情况下的拖动事件', e)
            }
          }
        },

        circle: {},
        rectangle: null
      }
    }
  },
  computed: {
    area() {
      const { ready, drawer } = this
      if (!ready) return 0
      console.log('33333')

      switch (drawer.type) {
        case 'none':
          return 0
        case 'polygon':
          console.log('ddddd')
          return window.AMap.GeometryUtil.ringArea(drawer.polygon)
        case 'rectangle':
          return new window.AMap.Rectangle({
            bounds: makeBounds(drawer.rectangle)
          }).getArea()
        case 'circle':
          return Math.PI * Math.pow(drawer.circle.radius, 2)
        default:
          return 0
      }
    }
  },
  mounted() {
  },
  methods: {
    //获取中心点
    getCenterPoint(data) {
      var lng = 0.0,
        lat = 0.0
      for (var i = 0; i < data.length; i++) {
        lng = lng + parseFloat(data[i][0])
        lat = lat + parseFloat(data[i][1])
      }
      lng = lng / data.length
      lat = lat / data.length
      return { lng: lng, lat: lat }
    },
    onDraw(type, res) {
      console.log('结果是：', res)
      this.$emit('getLine', res)
      this.drawer.type = type
      this.drawer[type] = res
      this.drawer.mode = 'none'
    },
    showModal() {
      const h = this.$createElement
//    console.log("props")
      this.$success({
        title: '当前圈选的范围',
        content: h('a-textarea', {
          attrs: {
            style: 'height: 400px; font-family: monospace;'
          },
          props: {
            value: JSON.stringify(this.drawer[this.drawer.type], null, '  ')
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.fence-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  left: 6px;
  top: 0;
  z-index: 9999;
}

.info {
  position: absolute;
  right: 6px;
  top: 0;
  z-index: 9999;
}
</style>
